<template>
  <div>
    <h3 v-bind="xxx">绑定属性</h3>
    <button @click="btnClick">修改数据</button>
    <h3>{{ obj.num }}</h3>
    <button @click="obj.num++">修改num</button>
    <button @click="setObj">修改num</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      xxx: {
        a: 1,
        b: 2,
        c: 3
      },
      num: 1,
      obj: {
        num: 0
      }
    }
  },
  watch: {
    obj: {
      handler() {
        // console.log('watch')
      },
      immediate: true
      //   deep: true
    }
  },
  beforeUpdate() {
    // console.log('beforeUpdate')
  },
  beforeDestroy() {
    // console.log('beforeDestroy', this.$route.path)
  },
  destroyed() {
    // console.log('destroyed', this.num)
  },
  methods: {
    btnClick() {
      this.num++
    },
    setObj() {
      this.obj = {
        num: this.obj.num + 1
      }
    }
  }
}
</script>
<style></style>
